import React from 'react';
import {View, Text, StyleSheet, ScrollView, Platform} from 'react-native';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as orderActionCreator from '../../actions/order-actions';
import {connectActionSheet} from '@expo/react-native-action-sheet';
import {getRealSize} from '../../utils';
import Rate from '../../components/rate';
import InputItem from '../../components/input-item';
import Button from '../../components/button';
import {I18n} from '../../reducers/intl';

class OrderCommentScreen extends React.Component {
  static navigationOptions = () => ({
    headerBackTitleStyle: Platform.OS === 'ios' && {
      height: 0,
      width: 0,
    },
    title: I18n.t('page.title.comment'),
  });

  state = {
    speed: 1,
    quality: 1,
    service: 1,
    remark: '',
    id: 0,
  };

  componentDidMount() {
    const orderId = this.props.navigation.getParam('orderId');
    this.setState({id: orderId});
  }

  onSubmit = async () => {
    const {orderActions, navigation} = this.props;
    try {
      await orderActions.praise(this.state.id, this.state);
      orderActions.loadOrder(this.state.id);
      navigation.pop();
    } catch (e) {
      throw e;
    }
  };

  render() {
    return (
      <ScrollView style={Styles.container}>
        <View style={Styles.box}>
          <Text style={Styles.title}>{I18n.t('form.label.comment.title')}</Text>
          <View style={Styles.content}>
            <Text style={Styles.label}>
              {I18n.t('form.label.comment.speed')}
            </Text>
            <Rate
              score={this.state.speed}
              onChange={value => this.setState({speed: value})}
              starStyle={{marginRight: getRealSize(4)}}
              size={24}
            />
          </View>
          <View style={Styles.content}>
            <Text style={Styles.label}>
              {I18n.t('form.label.comment.quality')}
            </Text>
            <Rate
              score={this.state.quality}
              onChange={value => this.setState({quality: value})}
              starStyle={{marginRight: getRealSize(4)}}
              size={24}
            />
          </View>
          <View style={Styles.content}>
            <Text style={Styles.label}>
              {I18n.t('form.label.comment.service')}
            </Text>
            <Rate
              score={this.state.service}
              onChange={value => this.setState({service: value})}
              starStyle={Styles.star}
              size={24}
            />
          </View>
        </View>
        <View style={Styles.box}>
          <InputItem
            multiline
            lines={6}
            value={this.state.remark}
            placeholder={I18n.t('form.placeholder.comment')}
            onChange={value => this.setState({remark: value})}
          />
        </View>
        <View style={Styles.submit}>
          <Button label={I18n.t('button.submit')} onPress={this.onSubmit} />
        </View>
      </ScrollView>
    );
  }
}

const mapStateToProps = state => ({
  appState: state.appState,
  user: state.user,
  order: state.order,
});

const mapDispatchToProps = dispatch => ({
  orderActions: bindActionCreators(orderActionCreator, dispatch),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(connectActionSheet(OrderCommentScreen));

const Styles = StyleSheet.create({
  container: {
    backgroundColor: '#f7f7f7',
    paddingHorizontal: getRealSize(15),
  },
  box: {
    marginTop: getRealSize(15),
    backgroundColor: 'white',
    padding: getRealSize(15),
  },
  title: {
    fontSize: getRealSize(18),
    fontWeight: 'bold',
    color: '#333',
  },
  content: {
    marginVertical: getRealSize(6),
    flexDirection: 'row',
    alignItems: 'center',
  },
  label: {
    marginRight: getRealSize(8),
    fontSize: getRealSize(16),
    fontWeight: '400',
    color: '#333',
    flex: 1,
  },
  star: {
    marginRight: getRealSize(4),
    flex: 1,
  },
  submit: {
    marginTop: getRealSize(24),
  },
});
